import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class DioDemo extends StatefulWidget {
  const DioDemo({super.key});

  @override
  State<DioDemo> createState() => _DioDemoState();
}

class _DioDemoState extends State<DioDemo> {
  /// 记录订单列表数据
  List _orderList = [];

  @override
  void initState() {
    // 获取订单列表数据
    loadData();
    super.initState();
  }

  // 演示dio插件的基本使用
  void loadData() async {
    // 1. 准备请求地址
    String path = 'https://mock.boxuegu.com/mock/1172/orders';

    // 2. 创建http client
    Dio dio = Dio();

    // 3. 发送网络请求，得到响应
    Response response = await dio.get(path);

    // 4. 刷新订单列表数据
    setState(() {
      _orderList = response.data;
    });
  }

  /// 生成订单状态的方法
  String getOrderState(int state) {
    String orderState = '待付款';
    switch (state) {
      case 1:
        orderState = '待付款';
        break;
      case 2:
        orderState = '待发货';
        break;
      case 3:
        orderState = '待收货';
        break;
      case 4:
        orderState = '待评价';
        break;
      default:
        orderState = '其他';
    }

    return orderState;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('订单列表页'),
      ),
      body: ListView.separated(
        itemBuilder: (BuildContext context, int index) {
          // 读取当前item需要的数据
          Map orderInfo = _orderList[index];

          return Container(
            padding: const EdgeInsets.all(10.0),
            color: Colors.white,
            child: Column(
              children: [
                // 1. 订单创建时间+订单状态
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // 创建时间
                    Text(
                      orderInfo['createTime'],
                      style: const TextStyle(
                          color: Color(0xFF666666), fontSize: 13),
                    ),
                    // 状态
                    Text(
                      getOrderState(orderInfo['orderState']),
                      style: const TextStyle(
                          color: Color(0xFFFF9240), fontSize: 13),
                    ),
                  ],
                ),
                // 2. 商品图片+名称+数量+规格+单价
                Padding(
                  padding: const EdgeInsets.only(top: 10.0),
                  child: Row(
                    children: [
                      // 图片
                      Image.network(
                        orderInfo['image'],
                        width: 86.0,
                        height: 86.0,
                      ),
                      // 名称+数量+规格+单价
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.only(left: 10.0),
                          child: Column(
                            // 保证名称+数量+规格+单价居左对齐
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // 名称+数量
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  // 名称
                                  Expanded(
                                    child: Text(
                                      orderInfo['name'],
                                      style: const TextStyle(
                                          color: Color(0xFF262626),
                                          fontSize: 14),
                                    ),
                                  ),
                                  // 数量
                                  Padding(
                                    padding: const EdgeInsets.only(left: 10.0),
                                    child: Text(
                                      'x ${orderInfo['totalNum']}',
                                      style: const TextStyle(
                                          color: Color(0xFF262626),
                                          fontSize: 14),
                                    ),
                                  ),
                                ],
                              ),
                              // 规格
                              Padding(
                                padding: const EdgeInsets.only(top: 6.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFF1F1F1),
                                    borderRadius: BorderRadius.circular(2.0),
                                  ),
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 3, horizontal: 5),
                                  child: Text(
                                    orderInfo['attrsText'],
                                    style: const TextStyle(
                                        color: Color(0xFF888888),
                                        fontSize: 12.0),
                                  ),
                                ),
                              ),
                              // 单价
                              Padding(
                                padding: const EdgeInsets.only(top: 6.0),
                                child: Text(
                                  '¥${orderInfo['curPrice']}',
                                  style: const TextStyle(
                                      color: Color(0xFF262626), fontSize: 14.0),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                // 3. 合计
                Padding(
                  padding: const EdgeInsets.only(top: 10.0),
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Text(
                      '合计：¥${orderInfo['curPrice'] * orderInfo['totalNum']}',
                      style: const TextStyle(
                          color: Color(0xFF262626), fontSize: 14.0),
                    ),
                  ),
                ),
                // 4. 再次购买
                Padding(
                  padding: const EdgeInsets.only(top: 10.0),
                  child: Container(
                    alignment: Alignment.centerRight,
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color(0xFF666666), width: 0.5),
                        borderRadius: BorderRadius.circular(2.0),
                      ),
                      padding: const EdgeInsets.symmetric(
                          vertical: 4, horizontal: 8),
                      child: const Text(
                        '再次购买',
                        style:
                            TextStyle(color: Color(0xFF666666), fontSize: 14.0),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(height: 8.0, color: const Color(0xFFF7F7F8));
        },
        itemCount: _orderList.length,
      ),
    );
  }
}
